import 'package:flutter/material.dart';

/***
 * TabBar({
    Key? key,
    required List<Widget> tabs,  // 定义每个标签
    TabController? controller,    // 控制器
    bool isScrollable = false,    // 是否可滚动
    Color? indicatorColor,        // 指示器颜色
    double indicatorWeight = 2.0, // 指示器宽度
    EdgeInsetsGeometry? indicatorPadding,  // 指示器填充
    Decoration? indicator,        // 自定义指示器
    TabBarIndicatorSize? indicatorSize,  // 指示器大小
    Color? labelColor,            // 标签文本颜色
    TextStyle? labelStyle,        // 标签文本样式
    Color? unselectedLabelColor,  // 未选中的标签颜色
    TextStyle? unselectedLabelStyle, // 未选中的标签样式
    MouseCursor? mouseCursor,
    bool? enableFeedback,
    })

 */
void main() {
  runApp(MaterialApp(
    /// 去掉debug图标
    debugShowCheckedModeBanner: false,
    home: MyTabbar(),
  ));
}

class MyTabbar extends StatefulWidget {
  const MyTabbar({super.key});

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyTabbarState();
  }
}

class _MyTabbarState extends State with SingleTickerProviderStateMixin {
  late final TabController _tabController =
      TabController(length: 9, vsync: this);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) {
        print('ssssssssssss');
      }
      if (_tabController.animation!.value == _tabController.index) {
        print('tabbar改变 ${_tabController.index}');
      }
    });
    // _tabController = TabController(length: 9, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        /// 整个appbar的展示颜色，包括字体以及左右侧图案
        foregroundColor: Colors.white,
        title: const Text('Tabbar 练习'),
        backgroundColor: Colors.green, // 背景
        /// 左侧的按钮菜单
        leading: IconButton(
            onPressed: () {
              print('菜单按钮点击');
            },
            icon: const Icon(Icons.menu)),

        /// 右侧按钮菜单
        actions: [
          IconButton(
              onPressed: () {
                print('搜索点击');
              },
              icon: const Icon(Icons.search)),
          IconButton(
              onPressed: () {
                print('更多点击');
              },
              icon: const Icon(Icons.more_horiz)),
        ],

        /// 设置tabbar
        bottom: TabBar(
            labelStyle: TextStyle(fontSize: 20, color: Colors.white),
            unselectedLabelStyle: TextStyle(fontSize: 15),
            indicatorColor: Colors.red,
            indicatorWeight: 2,
            padding: EdgeInsets.all(2),
            isScrollable: true,
            controller: _tabController,
            tabs: const [
              Tab(
                child: Text('热门'),
              ),
              Tab(
                child: Text('推荐'),
              ),
              Tab(
                child: Text('美食'),
              ),
              Tab(
                child: Text('体育'),
              ),
              Tab(
                child: Text('音乐'),
              ),
              Tab(
                child: Text('文化'),
              ),
              Tab(
                child: Text('图书'),
              ),
              Tab(
                child: Text('学习'),
              ),
              Tab(
                child: Text('外交'),
              ),
            ]),
      ),

      /// 在body里面配置对应的界面，与appbar的bottom设置的相对应
      /// 1.设置绑定的tabcontroller
      /// 2.通过设定的children来绑定与之对应的界面
      body: TabBarView(controller: _tabController, children: const [
        Text('1111'),
        Text('222'),
        Text('333'),
        Text('444'),
        Text('555'),
        Text('666'),
        Text('777'),
        Text('888'),
        Text('999'),
      ]),
    );
  }
}

/// 使用：
///
/// with mixin SingleTickerProviderStateMixin
/// 创建 tabcontroller,这是管理有多少个tab的，这个tabvc在tbottom.TabBar与tabview里面都需要绑定
/// 在appbar里面添加属性bottom,并为bottom添加Tabbar类型，两个重要的属性 ——controller和tabs要实现
/// body里的新增TabBarView,并添加controller与children能够与bottom->tabbar->tabs相对应

/*
*
AppBar({
  Key? key,
  Widget? leading,             // 左侧的导航按钮或其他Widget
  bool automaticallyImplyLeading = true,  // 自动检测是否需要显示导航按钮
  Widget? title,               // 标题
  List<Widget>? actions,        // 右侧的操作按钮
  Widget? flexibleSpace,        // 灵活的空间，在title之下
  PreferredSizeWidget? bottom,  // 可以放置 TabBar 等其他组件
  double? elevation,            // 阴影的高度
  Color? shadowColor,           // 阴影的颜色
  ShapeBorder? shape,           // 应用栏的形状
  Color? backgroundColor,       // 背景颜色
  Brightness? brightness,       // 状态栏图标和文字颜色
  IconThemeData? iconTheme,     // 左侧图标的主题
  TextTheme? textTheme,         // 标题文本的主题
  bool? centerTitle,            // 是否将标题居中
  bool excludeHeaderSemantics = false,
  double? titleSpacing,         // 标题的左右间距
  double toolbarOpacity = 1.0,  // 工具栏透明度
  double bottomOpacity = 1.0,   // bottom部分的透明度
})
* */
